<template>
  <view class="query_container">
      <u-navbar  >
          <view class="nav_title">待消费</view>
      </u-navbar>
    <view class="query_box">
      <van-field
        :value="queryparam.goods_name"
        placeholder="点击搜索您想找的商品名称/订单号"
        input-class="input"
        @blur="inputchange"
      />
      <view class="query_btn_box">
       <view class="status_box" >{{userinfo.org_type == 1?'待消费':'待发货'}}</view>
         <van-dropdown-menu active-color="#fe3772">
          <van-dropdown-item
            :value="queryparam.commission_status"
            :options="option2"
            @change="status_change2"
          />
        </van-dropdown-menu>
        <van-button custom-class="reset_btn" @tap="reset">重置</van-button>
        <van-button custom-class="reset_btn" @tap="thequery">查询</van-button>
      </view>
      <view class="query_btn_box">

      </view>
    </view>

    <!-- 订单展示区域 -->
    <scroll-view
      :scroll-y="true"
      class="scroll-y"
      @scrolltolower="scroll_bottom"
    >
      <view class="goods_container" v-if="orderList.length > 0">
        <view
          class="goodsInfo_box"
          v-for="(item, index) in orderList"
          :key="index"
        >
          <view class="goodsinfo">
            <!-- <image class="avatar" :src="item.goods_cover_img"></image> -->
            <view class="order_no_container">
              <text class="iconfont icon-order"></text>
              <view class="order_no" style="font-size:20rpx;color:#727278;margin-right:16rpx">({{
                  orderType[item.order_type]
                }})订单编号: {{item.order_id}}</view>
              <image :src="item.buy_userImage" alt="" class="buy_avatar">
            </view>
            <view class="order_info_container">
             <view class="img_box">
              <image
                class="avatar"
                :src="item.goods_cover_img+ '?' + timestamp"
                @tap="go_detail(item)"
                :lazy-load="true"
                @load="imgLoad(index)"
              ></image>
              <image
                :class="['avatar', 'load_img', item.imgShow ? 'hide_load' : '']"
                src="https://img.xingkonglian.net/img/common/load_img.png"
                @tap="go_detail(item)"
                v-if="!item.imgshow"
              ></image>
            </view>
            <view class="right ">
                <view class="first_row flex-r">
                  <view class="goods_title">{{item.goods_name}}</view>
                  <view class="price_count">
                    <view class="per_price">￥{{item.platform_price}}</view>
                    <view class="count">x {{item.goods_amt}}</view>
                  </view>
                </view>
            <view class="sec_row flex-r">
              <view class="mch_shopname"
                >{{ item.mch_name}}</view
              >
              <view class="status" v-if="item.order_type!=4&&item.order_type!=5&&userinfo.org_type!=1">{{
               statusList[item.order_status]
              }}</view>
              <view class="status" v-else>{{
               statusList1[item.order_status]
              }}</view>
            </view>
            <!-- <view class="third_row flex-r">
              <view class="price"
                >价格 {{ item.goods.price2 }}~{{ item.goods.price }}</view
              >
              <view class="count">库存 {{ item.goods.goods_total_amt }}</view>
            </view>
              <view class="goods_btn">
                <view class="user_info">
                  <image :src="item.buy_userImage" mode="" style="margin-right:10rpx"/>
                  <view class="user_name">{{ item.buy_user_nickname }}</view>
                </view>
                <view class="status">{{ statusList[item.order_status] }}</view>
              </view>

              <view class="goods_title">{{ item.goods_name }}</view> -->

            </view>
            </view>
          </view>
            <view class="goodsdata">
              <view class="goods_data">
              <view>订单金额<text>{{
                item.platform_price * item.goods_amt
              }}</text></view>
                   <view>返佣<text>{{
                (item.platform_price *
                  item.goods_amt *
                  (1 - item.commission_rate))
                  | toFixed2
              }}</text></view>
                <view>营收<text>{{
              item.commission_price | toFixed2
              }}</text></view>
            </view>
              <view class="goods_btn1">
                <u-button
                  size="mini"
                shape="circle"
                class="btn_1"
                  custom-class="btn"
                  v-if="item.order_status == 1&&userinfo.org_type!=1"
                  @click.stop="open_kuaidi(item)"
                  >发货</u-button
                >
                <u-button
                  size="mini"
                shape="circle"
                class="btn_1"
                  custom-class="btn"
                  v-if="item.order_status == 4"
                  @click.stop="shouhou(item)"
                  >退款审核</u-button
                >
              </view>

            </view>

        </view>
      </view>



      <view class="no_order" v-if="orderList.length == 0">
        <image src="/static/index/none_order.png" mode="" style="width:200rpx;height:200rpx"/>
        <view>暂无相关订单</view>
      </view>
      <u-loadmore
        :status="status"
        :icon-type="iconType"
        :load-text="loadText"
        v-if="orderList.length != 0"
      />
    </scroll-view>
    <van-popup :show="kuaidi_show" @close="close_kuadi">
      <view class="kuaidi_container">
        <!-- <uinput
          placeholder="请输入快递单号"
          @input="change_suc_times"
          label="快递单号"
        /> -->

        <u-field  v-model="express_param.express_name"
		 label="快递公司" placeholder="请选择快递公司" @tap="open_choose_express"
     :disabled="true"
		>
		</u-field>
        <u-field  v-model="express_param.express_no"
		 label="快递单号" placeholder="请输入快递单号"
		>
		</u-field>
      <view class="btn_container">
         <van-button custom-class="cancel_btn" @tap="close_kuadi">取消</van-button>
    <van-button custom-class="confirm_btn" @tap="confirm_express">确认</van-button>
      </view>
      </view>
    </van-popup>
    <u-select v-model="express_show" :list="expressList" @confirm="change_express" :type="false"></u-select>
    <!-- 商品展示区域 -->
    <van-toast id="van-toast" />
  </view>
</template>

<script>
import uinput from "../../components/poiuy-uinput/uinput";
import GoodInfo from "../components/good_info";
import { fetchList, orderExpress, afterSaleOrder } from "../../utils/imapi";
const app = getApp();
const statusList = {
  0: "待付款",
  1: "待发货",
  2: "已发货",
  3: "交易完成",
  4: "退款退货中",
  5: "已退款",
  6: "交易取消",
};

// 附近商家订单状态
const statusList1 = {
  0: "待付款",
  1: "待消费",
  2: "已发货",
  3: "交易完成",
  4: "退款退货中",
  5: "已退款",
  6: "交易取消",
};
const settlestatus = {
  0: "未结算",
  1: "已结算",
};
const orderType = {
  1: "普通购物",
  2: "砍价活动",
  3: "砍价推客版",
  4: "附近商家",
  5: "附近商家推广",
  0: "其他",
};
export default {
  props: {},
  components: {
    GoodInfo,
    uinput,
  },
  data() {
    return {
      statusList,
      statusList1,
      settlestatus,
      orderType,
      value: "",
      option1: [{ text: "待发货", value: "1" }],
      option2: [
        { text: "全部", value: "" },
        { text: "待结算", value: "1" },
        { text: "已结算", value: "2" },
      ],
      value1: 0,
      orderList: [],
      queryparam: {
        order_status: "1",
        goods_name: "",
        order_no: "",
        page_size: 6,
        page_index: 1,
        commission_status: "",
      },
      kuaidi_show: false,
      express_param: {
        express_name: "",
        express_no: "",
        order_id: "",
      },
      express_show: false,
      expressList: [
        {
          value: "顺丰快递",
          label: "顺丰快递",
        },
        {
          value: "圆通快递",
          label: "圆通快递",
        },
        {
          value: "中通快递",
          label: "中通快递",
        },
        {
          value: "申通快递",
          label: "申通快递",
        },
        {
          value: "韵达快递",
          label: "韵达快递",
        },
        {
          value: "天天快递",
          label: "天天快递",
        },
        {
          value: "EMS快递",
          label: "EMS快递",
        },
      ],
      timestamp: "",
      userinfo: {},
       status: "nomore",
       iconType: "flower",
      loadText: {
        loadmore: "暂时没有了",
        loading: "努力加载中",
        nomore: "实在没有了",
      },
    };
  },
  computed: {},
  watch: {},
  onLoad(options) {
    this.userinfo = app.globalData.userinfo || uni.getStorageSync('userinfo');
    if (options.status) {
      this.queryparam.order_status = options.status;
    }
    if (options.status1) {
      this.queryparam.commission_status = options.status1;
    }
    this.query_order();
  },
  onReady() {},
  onShow() {},
  methods: {
    open_kuaidi(item) {
      console.log(item);
      this.express_param.order_id = item.order_id;
      this.kuaidi_show = true;
    },
    close_kuadi() {
      this.kuaidi_show = false;
      this.express_param = {
        express_name: "",
        express_no: "",
        order_id,
      };
    },
    imgLoad(index) {
      this.$set(this.orderList[index], "imgShow", true);
    },
    async query_order() {
      const timestamp = Date.parse(new Date()).toString();
      try {
        const data = await fetchList(this.queryparam);
        console.log(data);
        if (data.code == 0) {
          this.timestamp = timestamp;
          this.orderList = data.data;
        }
      } catch (error) {}
    },
    status_change(e) {
      console.log(e.detail);
      this.queryparam.order_status = e.detail;
    },
    status_change2(e) {
      console.log(e.detail);
      this.queryparam.commission_status = e.detail;
      this.queryparam.page_index = 1;
      this.query_order();
    },
    inputchange(e) {
      console.log(e.detail);
      this.queryparam.goods_name = e.detail.value;
    },
    reset() {
      this.queryparam = {
        order_status: "1",
        goods_name: "",
        order_no: "",
        page_size: 6,
        page_index: 1,
        commission_status: "",
      };
      console.log(this.queryparam);
      this.query_order();
    },
    thequery() {
      this.queryparam.page_index = 1;
      this.query_order();
    },
    async scroll_bottom() {
      console.log("触底了");
      this.status = "loading";
      this.queryparam.page_index++;
      try {
        const data = await fetchList(this.queryparam);
        this.$toast.loading("加载中");
        if (data.code == 0) {
          this.status = "loadmore";
          this.orderList.push(...data.data);
          console.log(data);
          this.$toast.clear();
          if (data.data.length == 0) {
            this.status = "nomore";
            this.queryparam.page_index--;
            this.$toast("全部加载");
          }
        }
      } catch (error) {}
    },

    go_detail(item) {
      const id = item.order_id;
      uni.navigateTo({
        url: "/pages/order_detail/order_detail?id=" + id,
      });
    },
    open_choose_express() {
      this.express_show = true;
    },
    change_express(e) {
      console.log(e[0].value);
      this.express_param.express_name = e[0].value;
    },
    async confirm_express() {
      if (this.express_param.express_name == "") {
        return uni.showToast({
          title: "请选择快递公司",
          duration: 2000,
          icon: "none",
        });
      }
      if (this.express_param.express_no == "") {
        return uni.showToast({
          title: "请填写快递单号",
          duration: 2000,
          icon: "none",
        });
      }
      try {
        const data = await orderExpress(this.express_param);
        console.log(data);
        if (data.code == 0) {
          uni.showToast({
            title: "发货成功",
            duration: 2000,
            icon: "none",
          });
          this.close_kuadi();
        } else {
          uni.showToast({
            title: data.msg,
            duration: 2000,
            icon: "none",
          });
        }
      } catch (error) {}
    },
  },
  onReachBottom() {},
  onHide() {},
};
</script>

<style scoped lang="scss" scoped>
.query_container {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100vh;
  .goodsInfo_box {
    border-bottom: 16rpx solid #f0eefd;
    padding: 0 14rpx;
    .goodsinfo {
      // display: flex;
      // align-items: center;
      // margin-bottom: 20rpx;
      padding: 12rpx 12rpx 12rpx;
      border-bottom: 1px solid #f0eefd;
      position: relative;
      .order_no_container {
        display: flex;
        align-items: center;
        margin-bottom: 14rpx;
        .icon-order {
          font-size: 20rpx;
          margin-top: 4rpx;
          color: #f95a4b;
        }
        .buy_avatar {
          width: 22rpx;
          height: 22rpx;
          border-radius: 50%;
        }
      }
      .order_info_container {
        display: flex;
      }
      .img_box {
        position: relative;
        margin-right: 14rpx;
        width: 168rpx;
        height: 168rpx;
        border-radius: 8rpx;
      }
      .avatar {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        width: 168rpx;
        height: 168rpx;
        border-radius: 8rpx;
        display: block;
        transition: all 0.8s;
      }
      .load_img {
        z-index: 12;
        opacity: 1;
      }
      .hide_load {
        opacity: 0;
      }
      .right {
        flex: 1;
        .first_row {
          align-items: flex-start;
          margin-top: 6rpx;
          .price_count {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
          }
        }
        .goods_title {
          width: 380rpx;
          height: 70rpx;
          text-align: left;
          font-size: 26rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #0a0819;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          // -webkit-box-orient: vertical;
        }
        .status {
          color: #f95a4b;
          font-size: 26rpx;
        }
      }
    }
    .goodsdata {
      padding: 16rpx 16rpx 34rpx;
      .goods_data {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 34rpx;
        & > view {
          margin-left: 30rpx;
          color: #727278;
          font-size: 20rpx;
        }
        text {
          color: #0a0819;
          font-size: 26rpx;
          margin-left: 24rpx;
        }
      }
    }
    .goods_btn1 {
      display: flex;
      justify-content: flex-end;
      /deep/ .btn {
        width: 120rpx;
        height: 46rpx;
        background: #fe3772;
        border-radius: 34rpx;
        opacity: 0.71;
        color: #fff;
        text-align: center;
        line-height: 46rpx;
        font-size: 28rpx;
      }
    }
  }

  .query_box {
    width: 750rpx;
    height: 208rpx;
    background: #fe3772;
    padding: 32rpx 32rpx 24rpx;
    /deep/ .van-cell {
      height: 68rpx;
      background: #fff;
      border-radius: 38rpx;
      display: flex;
      align-items: center;
      overflow: hidden;
      .input {
        height: 100%;
        font-size: 24rpx;
        padding-top: 5rpx;
      }
    }
    .query_btn_box {
      margin-top: 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .status_box {
        width: 150rpx;
        height: 60rpx;
        background: #ffffff;
        border-radius: 34rpx;
        text-align: center;
        line-height: 60rpx;
      }
      /deep/ .van-dropdown-menu {
        width: 150rpx;
        height: 60rpx;
        background: #ffffff;
        border-radius: 34rpx;
      }
      /deep/ .reset_btn {
        width: 150rpx;
        height: 60rpx;
        background: #fe3772;
        border-radius: 34rpx;
        border: 2rpx solid #ffffff;
        text-align: center;
        line-height: 68rpx;
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #fff;
      }
    }
  }
  .btn_container {
    display: flex;
    justify-content: space-between;
    margin-top: 20rpx;
    padding: 0 30rpx;
  }
  /deep/ .confirm_btn {
    width: 150rpx;
    height: 60rpx;
    background: #fe3772;
    border-radius: 34rpx;
    border: 2rpx solid #ffffff;
    text-align: center;
    line-height: 68rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #fff;
  }
  /deep/ .cancel_btn {
    width: 150rpx;
    height: 60rpx;
    background: #fff;
    border-radius: 34rpx;
    text-align: center;
    line-height: 68rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #0a0819;
    border: 1px solid #f0eefd;
  }
}
scroll-view {
  flex: 1;
  position: relative;
  overflow-y: scroll;
}
.no_order {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.goods_btn1 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 10rpx;
  /deep/ .btn {
    width: 120rpx;
    height: 40rpx;
    padding: 0 !important;
    background: #fff;
    border-radius: 34rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #0a0819;
    line-height: 40rpx;
  }
  /deep/ .public {
    background: #6d55ed !important;
    color: #ffffff !important;
  }
}
.kuaidi_container {
  width: 600rpx;
  padding: 30rpx 0;
}
/deep/ .nav_title {
  font-size: 36rpx !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.btn_1 {
    background-color: #fe3772;
    color: #fff;
    box-shadow: 2px 1px 1px #e8e8e8;
    margin-left: unset !important;
    margin-right: unset !important;
    margin-left: 30rpx !important;
    width: 150rpx !important;
  }
</style>
